<%--
  Created by IntelliJ IDEA.
  User: prim
  Date: 2021/2/3
  Time: 11:46 下午
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>FastDFS 文件上传</title>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <%--    <link rel="stylesheet" href="css/element.css">--%>
</head>
<body>
<h2 style="text-align: center;">小视频上传</h2>
<div id="app" style="height: 20px;width: 600px;margin: 10px auto;">
    <el-upload
            class="upload-demo"
            ref="upload"
            action="${pageContext.request.contextPath}/upload"
            :on-success="handleSuccess"
            :on-error="handleError"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-upload="beforeUploadVideo"
            :file-list="fileList"
            :auto-upload="false"
            :multiple="true">
        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
        <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
        <div slot="tip" class="el-upload__tip">上传视频文件，且不超过1GB</div>
    </el-upload>
    <!-- 上传文件预览 -->
    <el-row :gutter="20">
        <el-col :span="5" v-for="(o, index) in uploadList" :key="index">
            <video v-if="o.path !=''"
                   :src="o.path"
                   class="avatar video-avatar"
                   width="200px"
                   height="200px"
                   controls="controls">
        </el-col>
    </el-row>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                videoFlag: false,
                fileList: [],
                uploadList: [],
                videoForm: {
                    showVideoPath: ''
                }
            }
        },
        methods: {
            submitUpload() {
                this.$refs.upload.submit();
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePreview(file) {
                console.log(file);
            },
            handleSuccess(response, file, fileList) {
                this.uploadList.push({
                    name: response.fileName,
                    path: "http://172.16.150.130/" + response.filePath
                })
            },
            handleError(err, file, fileList) {

            },
            beforeUploadVideo(file) {
                var fileSize = file.size / 1024 / 1024 < 1024;
                if (['video/mp4', 'video/ogg', 'video/flv', 'video/avi', 'video/wmv', 'video/rmvb', 'video/mov'].indexOf(file.type) == -1) {
                    alert("请上传正确的视频格式");
                    return false;
                }
                if (!fileSize) {
                    alert("视频大小不能超过1GB");
                    return false;
                }
            }
        }
    })
</script>
</html>
